<template>
  <div class="charts_container">
    <slot name="tit"></slot>
    <div id="houseCountTotalCharts" style="width: 100%;height: 100%;">
      <div class="nodata" v-if="!data || !data.length">暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      required: true
    }
  },
  watch: {
    data(newv) {
      this._initCharts()
    }
  },
  mounted() {
    this._initCharts()
  },
  methods: {
    _initCharts () {
      if(!this.data || !this.data.length) {
          return
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("houseCountTotalCharts"))
      
      const labels = []
      const houseCount = []
      const ownerCount = []
      const smallTotalCount = []
      const faceTotal = []

      for(let i = 0; i < this.data.length; i++) {
        labels.push(this.data[i].name)
        houseCount.push(this.data[i].house)
        ownerCount.push(this.data[i].owner)
        smallTotalCount.push(this.data[i].smallTotal)
        faceTotal.push(this.data[i].faceTotal)
      }
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle:{
      　　 align:'left'
      　  }
        },
          title: {
              text: '数量',
              textStyle: {
                color: '#fff',
                fontSize: this.$options.filters.fontSize(0.12),
              },
              left: 0,
              top: this.$options.filters.fontSize(0.10)
              
          },
          grid: {
              left: '2%',
              right: '4%',
              bottom: '10%',
              top: '20%',
              containLabel: true
          },
          legend: {
              data: ['房屋总数', '户主总数', '小程序用户数', '人脸下发数'],
              right: this.$options.filters.fontSize(0.1),
              top: this.$options.filters.fontSize(0.3),
              textStyle: {
                  color: "#fff",
                  fontSize: this.$options.filters.fontSize(0.12)
              },
              itemWidth: this.$options.filters.fontSize(0.1),
              itemHeight: this.$options.filters.fontSize(0.1),
              // itemGap: 35
          },
          xAxis: {
              type: 'category',
              data: labels,
              axisLine: {
                  lineStyle: {
                      color: 'transparent'
                  }
              },
              axisLabel: {
                  // interval: 0,
                  // rotate: 40,
                  textStyle: {
                      color: '#fff',
                      fontSize: this.$options.filters.fontSize(0.14)
                  }
              },
              axisTick: {
                  show: false
              }
          },

          yAxis: {
            //   name: '数量(个)',
              nameTextStyle: {
                  color: '#fff',
                  fontSize: this.$options.filters.fontSize(0.12)
              },
              type: 'value',
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: 'transparent'
                  }
              },
              splitLine: {
                  show: true,
                  lineStyle: {
                      color: 'rgba(255,255,255,0.3)'
                  }
              },
              axisLabel: { //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: '#fff',
                        fontSize: this.$options.filters.fontSize(0.12)
                    },
                },
              axisTick: {
                  show: false
              }
          },
          "dataZoom": [{
              "show": true,
              "height": this.$options.filters.fontSize(0.06),
              "xAxisIndex": [
                  0
              ],
              bottom: '2%',
              "start": 0,
              "end": 25,
              backgroundColor: '#303030',
              handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
              handleSize: '110%',
              handleStyle: {
                  color: "transparent",
              },
              textStyle: {
                  color: "transparent"
              },
              borderColor: "transparent",
              fillerStyle: {
                  barBorderRadius: 2,
              },
              fillerColor: "#828282",
          }, {
              "type": "inside",
              "show": true,
              "height": this.$options.filters.fontSize(0.15),
              "start": 1,
              "end": 25
          }],
          series: [{
                  name: '房屋总数',
                  type: 'bar',
                  barWidth: '15%',
                  itemStyle: {
                      normal: {
                          color: '#9A5B24',
                          barBorderRadius: 2,
                      },
                  },
                  data: houseCount
              },
              {
                  name: '户主总数',
                  type: 'bar',
                  barWidth: '15%',
                  itemStyle: {
                      normal: {
                          color: '#3E70B4',
                          barBorderRadius: 2,
                      }

                  },
                  data: ownerCount
              },
              {
                  name: '小程序用户数',
                  type: 'bar',
                  barWidth: '15%',
                  itemStyle: {
                      normal: {
                          color: '#5243C6',
                          barBorderRadius: 2,
                      }

                  },
                  data: smallTotalCount
              },
              {
                  name: '人脸下发数',
                  type: 'bar',
                  barWidth: '15%',
                  itemStyle: {
                      normal: {
                          color: '#2A837A',
                          barBorderRadius: 2,
                      }

                  },
                  data: faceTotal
              }
          ]
      };





      // 绘制图表
      myChart.setOption(option)

    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 100%;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
</style>